<template>
  <iInput :value="currentValue"
          :number='true'
          :readonly="true">
    <Button slot="append"
            icon="plus"
            @click="setValueByClick(currentValue + 1)">
    </Button>
    <Button slot="prepend"
            icon="minus"
            :disabled="currentValue <= 1"
            @click="setValueByClick(currentValue - 1)">
    </Button>
  </iInput>
</template>

<script>
  export default {
    data() {
      return {
        'currentValue': this.value
      }
    },
    props: {
      "value": Number
    },
    watch: {
      value(val) {
        this.setCurrentValue(val);
      }
    },
    methods: {
      setCurrentValue(value) {
        if (value === this.currentValue) {
          return;
        }
        this.currentValue = value;
      },
      setValueByClick(value) {
        this.setCurrentValue(value);
        this.$emit("button-click", value);
      }
    }
  }
</script>
